<!DOCTYPE html>

<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  <meta name="baidu-site-verification" content="GOgEP8c1pN"/>
  

  <title>
    Markdown 自动生成文章目录_Django博客教程_追梦人物的博客</title>

  <link href="font-awesome.min.css"
        rel="stylesheet">
  <link rel="stylesheet" href="mobi.min.css">
  <link rel="stylesheet" href="modal.min.css">
  <link rel="stylesheet" href="friendly.css">
  <link rel="stylesheet" href="blog.css?v0.12">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="/static/blog/js/menu.js"></script>
  <script src="/static/blog/js/modal.min.js"></script>
  <script src="/static/blog/js/blog.js"></script>
  

  
    <script>
        // baidu statistics
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?fb59b2a6022bccc02671a750f61c356b";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();

        // baidu auto push
        (function () {
            var bp = document.createElement('script');
            var curProtocol = window.location.protocol.split(':')[0];
            if (curProtocol === 'https') {
                bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
            }
            else {
                bp.src = 'http://push.zhanzhang.baidu.com/push.js';
            }
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(bp, s);
        })();
    </script>
    
  
</head>
<body class="bg-light">
<header>
  <nav class="flex-center bg-white nav-bar">
    <div class="container-wider flex-middle">
      
  <a class="show-on-mobile nav-link m-5" id="js-sidebar-btn" href="#" role="button">
    <i class="fa fa-chevron-right" aria-hidden="true"></i>
  </a>

      <a class="nav-bar-logo mr-7" href="/">
        <img src="/static/blog/images/logo.png" alt="blog logo">
      </a>
      <ul class="unit-0 hide-on-mobile nav-bar-nav">
        <li class="nav-item mr-7">
          <a class="nav-link" href="/">首页</a>
        </li>
        <li class="nav-item mr-7">
          <a class="nav-link" href="/tutorials/">教程</a>
        </li>
        <li class="nav-item mr-7">
          <a class="nav-link" href="/categories/">分类</a>
        </li>
        <li class="nav-item mr-7">
          <a class="nav-link" href="/archives/">归档</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/donate/">赞助</a>
        </li>
      </ul>
      <div class="unit flex-right flex-middle">
        <form class="hide-on-mobile flex-left flex-middle search-form mr-5" id="search-form"
              action="/search/">
          <input class="unit" type="search" name="q" placeholder="搜索..."/>
          <button class="unit-0" type="submit" role="button">
            <i class="fa fa-search" aria-hidden="true"></i>
          </button>
        </form>
        <a class="show-on-mobile nav-link fs-7 mr-7" id="js-search-btn" href="#" role="button">
          <i class="fa fa-search" aria-hidden="true"></i>
        </a>
        <div class="flex-middle notification">
          
            <a class="nav-link" href="/accounts/login/">
              <i class="fa fa-sign-in" aria-hidden="true"></i>
            </a>
          
        </div>
        <div class="show-on-mobile flex-middle">
          <a class="nav-link fs-7 ml-7 mr-5" id="menu-toggle" href="#">
            <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
          </a>
          <ul class="menu bg-white" data-menu data-menu-toggle="#menu-toggle">
            <li class="nav-item mr-7">
              <a class="nav-link" href="/">首页</a>
            </li>
            <li>
              <a href="/tutorials/">教程</a>
            </li>
            <li>
              <a href="/categories/">分类</a>
            </li>
            <li>
              <a href="/archives/">归档</a>
            </li>
            <li>
              <a href="/donate/">赞助</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
</header>
<section class="flex-center">
  <div class="container-wider">
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">设置评论回复接收邮箱</h4>
            <div class="text-primary mt-2">邮箱仅用于接收回复提醒，不会被公开。</div>
            
          </div>
          <div class="modal-body">
            <form class="form email-binding-form" action="/comments/ajax_email_binding/">
              <div class="message">
                <span class="text-danger"></span>
              </div>
              <input type='hidden' name='csrfmiddlewaretoken' value='oB3KJOpUIX8ffJEXn3mCl4IC6gtlWqBcKff3edUvpQSMsk5rz7Icj1wWgXPsfbaQ' />
              <div class="flex-left units-gap">
                <label class="unit-0 text-right" for="multiple-inputs-name">邮箱: </label>
                <div class="unit">
                  <input type="email" name="email" id="id_email" placeholder="请输入绑定邮箱"/>
                </div>
                <div class="unit-0">
                  <button class="btn" id="js-send" type="button"
                          data-target="/comments/ajax_verification_code/">发送验证码
                  </button>
                </div>
              </div>
              <div class="flex-left units-gap">
                <label class="unit-0 text-right" for="multiple-inputs-name">验证码: </label>
                <div class="unit">
                  <input type="text" name="verification_code" id="id_verification_code"
                         placeholder="请输入接收到的验证码"/>
                </div>
              </div>
              <div class="flex-right">
                <button type="button" class="btn btn-danger mr-3" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary" id="js-submit">设置</button>
              </div>
            </form>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal -->
    </div>
    <div class="flex-left flex-wrap "
         style="margin-top: 60px">
      
  <aside class="unit-1-4 unit-1-on-mobile top-gap">
    <div class="scroll-view bg-white card toc-sidebar" style="height: 100%">
      <div class="card-header">
        目录
      </div>
      <div class="flex-left">
        <div class="unit-1-4">
          <a href="https://promotion.aliyun.com/ntms/act/group/team.html?group=FcfAncJPAp" target="_blank"><img
              src="/static/blog/images/aliyun.jpg" alt=""></a>
        </div>
        <div class="unit-1-2 flex-vertical top-gap text-small">
          <a style="color: #e83e8c" target="_blank"
             href="https://promotion.aliyun.com/ntms/act/group/team.html?group=FcfAncJPAp">云服务器新用户</a>
          <a style="color: #6610f2" target="_blank"
             href="https://promotion.aliyun.com/ntms/act/group/team.html?group=FcfAncJPAp">8元/月</a>
        </div>
      </div>
      <div class="card-body">
        <ul>
          <li>
            <h6 class="top-gap-0"><a href="">Django博客教程</a></h6>
            <ul>
              
                <li>
                  <a href="2.html">前言</a>
                  
                </li>
              
                <li>
                  <a href="3.html">搭建开发环境</a>
                  
                </li>
              
                <li>
                  <a href="4.html">建立 Django 博客应用</a>
                  
                </li>
              
                <li>
                  <a href="5.html">创建 Django 博客的数据库模型</a>
                  
                </li>
              
                <li>
                  <a href="6.html">让 Django 完成翻译：迁移数据库</a>
                  
                </li>
              
                <li>
                  <a href="7.html">Django 博客首页视图</a>
                  
                </li>
              
                <li>
                  <a href="8.html">真正的 Django 博客首页视图</a>
                  
                </li>
              
                <li>
                  <a href="9.html">在 Django Admin 后台发布文章</a>
                  
                </li>
              
                <li>
                  <a href="10.html">博客文章详情页</a>
                  
                </li>
              
                <li>
                  <a href="11.html">支持 Markdown 语法和代码高亮</a>
                  
                </li>
              
                <li>
                  <a href="12.html">页面侧边栏：使用自定义模板标签</a>
                  
                </li>
              
                <li>
                  <a href="13.html">分类与归档</a>
                  
                </li>
              
                <li>
                  <a href="14.html">评论</a>
                  
                </li>
              
                <li>
                  <a href="16.html">已知小问题修正</a>
                  
                </li>
              
                <li>
                  <a href="20.html">使用 Nginx 和 Gunicorn 部署 Django 博客</a>
                  
                </li>
              
                <li>
                  <a href="21.html">使用 Fabric 自动化部署</a>
                  
                </li>
              
                <li>
                  <a href="29.html">统计文章阅读量</a>
                  
                </li>
              
                <li>
                  <a href="32.html">自动生成文章摘要</a>
                  
                </li>
              
                <li>
                  <a href="33.html">基于类的通用视图：ListView 和 DetailView</a>
                  
                </li>
              
                <li>
                  <a href="34.html">Django Pagination 简单分页</a>
                  
                </li>
              
                <li>
                  <a href="37.html">Django Pagination 完善分页</a>
                  
                </li>
              
                <li>
                  <a href="38.html">统计各个分类下的文章数</a>
                  
                </li>
              
                <li>
                  <a href="39.html">标签云</a>
                  
                </li>
              
                <li>
                  <a href="41.html">RSS 订阅</a>
                  
                </li>
              
                <li>
                  <a href="43.html">Markdown 自动生成文章目录</a>
                  
                    <div class="toc">
<ul>
<li><a href="#在文中插入目录">在文中插入目录</a></li>
<li><a href="#在页面的任何地方插入目录">在页面的任何地方插入目录</a></li>
<li><a href="#美化标题的锚点-url">美化标题的锚点 URL</a></li>
<li><a href="#总结">总结</a></li>
</ul>
</div>

                  
                </li>
              
                <li>
                  <a href="44.html">简单全文搜索</a>
                  
                </li>
              
                <li>
                  <a href="45.html">Django Haystack 全文检索与关键词高亮</a>
                  
                </li>
              
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </aside>

      
  <div class="unit-3-4 unit-1-on-mobile top-gap">
    


<div class="bg-white card post-card px-7 py-5">
  
<article class="post">
  <h1 class="top-gap-0">Markdown 自动生成文章目录</h1>
  <ul class="list-inline dot-divider post-meta">
    <li class="list-inline-item text-small text-muted">
      9 月，4 周前
    </li>
    <li class="list-inline-item text-small text-muted">4960 字
    </li>
    <li class="list-inline-item text-small text-muted">
      9007 阅读
    </li>
    <li class="list-inline-item text-small text-muted">
      19 评论
    </li>
  </ul>
  <div class="top-gap-big post-body">
    <p>我们的之前在博客中使用了 Markdown 来为文章提供排版支持。Markdown 在渲染内容的同时还可以自动提取整个内容的目录结构，现在我们来使用 Markdown 为文章自动生成目录。</p>
<h2 id="在文中插入目录">在文中插入目录</h2>
<p>先来回顾一下博客的 Post（文章）模型，其中 <code>body</code> 是我们存储 Markdown 文本的字段：</p>
<div class="codehilite"><pre><span></span><span class="n">blog</span><span class="o">/</span><span class="n">models</span><span class="o">.</span><span class="n">py</span>

<span class="kn">from</span> <span class="nn">django.db</span> <span class="kn">import</span> <span class="n">models</span>

<span class="k">class</span> <span class="nc">Post</span><span class="p">(</span><span class="n">models</span><span class="o">.</span><span class="n">Model</span><span class="p">):</span>
    <span class="c1"># Other fields ...</span>
    <span class="n">body</span> <span class="o">=</span> <span class="n">models</span><span class="o">.</span><span class="n">TextField</span><span class="p">()</span>
</pre></div>


<p>再来回顾一下文章详情页的视图，我们在 <code>PostDetailView</code> 中将 <code>post</code> 的 <code>body</code> 字段中的 Markdown 文本渲染成了 HTML 文本，然后传递给模板显示。注意这里我们使用的是类视图，类视图的内容具体请参考 <a href="http://zmrenwu.com33.html">基于类的通用视图：ListView 和 DetailView</a>。 </p>
<div class="codehilite"><pre><span></span><span class="n">blog</span><span class="o">/</span><span class="n">views</span><span class="o">.</span><span class="n">py</span>

<span class="k">class</span> <span class="nc">PostDetailView</span><span class="p">(</span><span class="n">DetailView</span><span class="p">):</span>
    <span class="c1"># 这些属性的含义和 ListView 是一样的</span>
    <span class="n">model</span> <span class="o">=</span> <span class="n">Post</span>
    <span class="n">template_name</span> <span class="o">=</span> <span class="s1">&#39;blog/detail.html&#39;</span>
    <span class="n">context_object_name</span> <span class="o">=</span> <span class="s1">&#39;post&#39;</span>

    <span class="k">def</span> <span class="nf">get</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">request</span><span class="p">,</span> <span class="o">*</span><span class="n">args</span><span class="p">,</span> <span class="o">**</span><span class="n">kwargs</span><span class="p">):</span>
        <span class="c1"># ...</span>

    <span class="k">def</span> <span class="nf">get_object</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">queryset</span><span class="o">=</span><span class="bp">None</span><span class="p">):</span>
        <span class="c1"># 覆写 get_object 方法的目的是因为需要对 post 的 body 值进行渲染</span>
        <span class="n">post</span> <span class="o">=</span> <span class="nb">super</span><span class="p">(</span><span class="n">PostDetailView</span><span class="p">,</span> <span class="bp">self</span><span class="p">)</span><span class="o">.</span><span class="n">get_object</span><span class="p">(</span><span class="n">queryset</span><span class="o">=</span><span class="bp">None</span><span class="p">)</span>
        <span class="n">post</span><span class="o">.</span><span class="n">body</span> <span class="o">=</span> <span class="n">markdown</span><span class="o">.</span><span class="n">markdown</span><span class="p">(</span><span class="n">post</span><span class="o">.</span><span class="n">body</span><span class="p">,</span>
                                      <span class="n">extensions</span><span class="o">=</span><span class="p">[</span>
                                          <span class="s1">&#39;markdown.extensions.extra&#39;</span><span class="p">,</span>
                                          <span class="s1">&#39;markdown.extensions.codehilite&#39;</span><span class="p">,</span>
                                          <span class="s1">&#39;markdown.extensions.toc&#39;</span><span class="p">,</span>
                                      <span class="p">])</span>
        <span class="k">return</span> <span class="n">post</span>

    <span class="k">def</span> <span class="nf">get_context_data</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="o">**</span><span class="n">kwargs</span><span class="p">):</span>
        <span class="c1"># ...</span>
</pre></div>


<p>看到 <code>get_object</code> 方法中的代码，<code>markdown.markdown()</code> 方法把 <code>post.body</code> 中的 Markdown 文本渲染成了 HTML 文本。同时我们还给该方法提供了一个 <code>extensions</code> 的额外参数。其中 <code>markdown.extensions.codehilite</code> 是代码高亮拓展，而 <code>markdown.extensions.toc</code> 就是自动生成目录的拓展（这里可以看出我们有先见之明，如果你之前没有添加的话记得现在添加进去）。</p>
<p>在渲染 Markdown 文本时加入了 toc 拓展后，就可以在文中插入目录了。方法是在书写 Markdown 文本时，在你想生成目录的地方插入 [TOC] 标记即可。例如新写一篇 Markdown 博文，其 Markdown 文本内容如下：</p>
<div class="codehilite"><pre><span></span><span class="k">[TOC]</span>

<span class="c1">## 我是标题一</span>

<span class="na">这是标题一下的正文</span>

<span class="c1">## 我是标题二</span>

<span class="na">这是标题二下的正文</span>

<span class="c1">### 我是标题二下的子标题</span>
<span class="na">这是标题二下的子标题的正文</span>

<span class="c1">## 我是标题三</span>
<span class="na">这是标题三下的正文</span>
</pre></div>


<p>其最终渲染后的效果就是：</p>
<p><img alt="Markdown文中目录" src="//bkt.zmrenwu.com/Markdown%E6%96%87%E4%B8%AD%E7%9B%AE%E5%BD%95.png" /></p>
<p>原本 [TOC] 标记的地方被内容的目录替换了。</p>
<h2 id="在页面的任何地方插入目录">在页面的任何地方插入目录</h2>
<p>上述方式的一个局限局限性就是只能通过 [TOC] 标记在文章内容中插入目录。如果我想在页面的其它地方，比如侧边栏插入一个目录该怎么做呢？方法其实也很简单，只需要稍微改动一下渲染 Markdown 文本内容的方式即可，具体代码就像这样：</p>
<div class="codehilite"><pre><span></span><span class="n">blog</span><span class="o">/</span><span class="n">views</span><span class="o">.</span><span class="n">py</span>

<span class="k">class</span> <span class="nc">PostDetailView</span><span class="p">(</span><span class="n">DetailView</span><span class="p">):</span>
    <span class="c1"># 这些属性的含义和 ListView 是一样的</span>
    <span class="n">model</span> <span class="o">=</span> <span class="n">Post</span>
    <span class="n">template_name</span> <span class="o">=</span> <span class="s1">&#39;blog/detail.html&#39;</span>
    <span class="n">context_object_name</span> <span class="o">=</span> <span class="s1">&#39;post&#39;</span>

    <span class="k">def</span> <span class="nf">get</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">request</span><span class="p">,</span> <span class="o">*</span><span class="n">args</span><span class="p">,</span> <span class="o">**</span><span class="n">kwargs</span><span class="p">):</span>
        <span class="c1"># ...</span>

    <span class="k">def</span> <span class="nf">get_object</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">queryset</span><span class="o">=</span><span class="bp">None</span><span class="p">):</span>
        <span class="c1"># 覆写 get_object 方法的目的是因为需要对 post 的 body 值进行渲染</span>
        <span class="n">md</span> <span class="o">=</span> <span class="n">markdown</span><span class="o">.</span><span class="n">Markdown</span><span class="p">(</span><span class="n">extensions</span><span class="o">=</span><span class="p">[</span>
            <span class="s1">&#39;markdown.extensions.extra&#39;</span><span class="p">,</span>
            <span class="s1">&#39;markdown.extensions.codehilite&#39;</span><span class="p">,</span>
            <span class="s1">&#39;markdown.extensions.toc&#39;</span><span class="p">,</span>
        <span class="p">])</span>
        <span class="n">post</span><span class="o">.</span><span class="n">body</span> <span class="o">=</span> <span class="n">md</span><span class="o">.</span><span class="n">convert</span><span class="p">(</span><span class="n">post</span><span class="o">.</span><span class="n">body</span><span class="p">)</span>
        <span class="n">post</span><span class="o">.</span><span class="n">toc</span> <span class="o">=</span> <span class="n">md</span><span class="o">.</span><span class="n">toc</span>
        <span class="k">return</span> <span class="n">post</span>

    <span class="k">def</span> <span class="nf">get_context_data</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="o">**</span><span class="n">kwargs</span><span class="p">):</span>
        <span class="c1"># ...</span>
</pre></div>


<p>和之前的代码不同，在 <code>get_object</code> 方法中我们没有直接用 <code>markdown.markdown()</code> 方法来渲染 <code>post.body</code> 中的内容，而是先实例化了一个 <code>markdown.Markdown</code> 类 <code>md</code>，和 <code>markdown.markdown()</code> 方法一样，也传入了 <code>extensions</code> 参数。接着我们便使用该实例的 <code>convert</code> 方法将 <code>post.body</code> 中的 Markdown 文本渲染成 HTML 文本。而一旦调用该方法后，实例 <code>md</code> 就会多出一个 <code>toc</code> 属性，这个属性的值就是内容的目录，我们把 <code>md.toc</code> 的值赋给 <code>post.toc</code> 属性（要注意这个 post 实例本身是没有 md 属性的，我们给它动态添加了 md 属性，这就是 Python 动态语言的好处，不然这里还真不知道该怎么把 toc 的值传给模板）。</p>
<p>接下来就在博客文章详情页的文章目录侧边栏渲染文章的目录吧！删掉占位用的目录内容，替换成如下代码：</p>
<div class="codehilite"><pre><span></span>{% block toc %}
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;widget widget-content&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">h3</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;widget-title&quot;</span><span class="p">&gt;</span>文章目录<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
        {{ post.toc|safe }}
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
{% endblock toc %}
</pre></div>


<p>即使用模板变量标签 {{ post.toc }} 显示模板变量的值，注意 post.toc 实际是一段 HTML 代码，我们知道 Django 会对模板中的 HTML 代码进行转义，所以要使用 safe 标签防止 Django 对其转义。其最终渲染后的效果就是：</p>
<p><img alt="Markdown自动生成的侧边栏目录" src="//bkt.zmrenwu.com/Markdown%E8%87%AA%E5%8A%A8%E7%94%9F%E6%88%90%E7%9A%84%E4%BE%A7%E8%BE%B9%E6%A0%8F%E7%9B%AE%E5%BD%95.png" /></p>
<h2 id="美化标题的锚点-url">美化标题的锚点 URL</h2>
<p>文章内容的标题被设置了锚点，点击目录中的某个标题，页面就会跳到该文章内容中标题所在的位置，这时候浏览器的 URL 显示的值可能不太美观，比如像下面的样子：</p>
<blockquote>
<p>http://127.0.0.1:80008.html#_1</p>
<p>http://127.0.0.1:80008.html#_3</p>
</blockquote>
<p><code>#_1</code> 就是锚点，Markdown 在设置锚点时利用的是标题的值，由于通常我们的标题都是中文，Markdown 没法处理，所以它就忽略的标题的值，而是简单地在后面加了个 _1 这样的锚点值。为了解决这一个问题，我们需要修改一下传给 <code>extentions</code> 的参数，其具体做法如下：</p>
<div class="codehilite"><pre><span></span><span class="n">blog</span><span class="o">/</span><span class="n">views</span><span class="o">.</span><span class="n">py</span>

<span class="kn">from</span> <span class="nn">django.utils.text</span> <span class="kn">import</span> <span class="n">slugify</span>
<span class="kn">from</span> <span class="nn">markdown.extensions.toc</span> <span class="kn">import</span> <span class="n">TocExtension</span>

<span class="k">class</span> <span class="nc">PostDetailView</span><span class="p">(</span><span class="n">DetailView</span><span class="p">):</span>
    <span class="c1"># 这些属性的含义和 ListView 是一样的</span>
    <span class="n">model</span> <span class="o">=</span> <span class="n">Post</span>
    <span class="n">template_name</span> <span class="o">=</span> <span class="s1">&#39;blog/detail.html&#39;</span>
    <span class="n">context_object_name</span> <span class="o">=</span> <span class="s1">&#39;post&#39;</span>

    <span class="k">def</span> <span class="nf">get</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">request</span><span class="p">,</span> <span class="o">*</span><span class="n">args</span><span class="p">,</span> <span class="o">**</span><span class="n">kwargs</span><span class="p">):</span>
        <span class="c1"># ...</span>

    <span class="k">def</span> <span class="nf">get_object</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">queryset</span><span class="o">=</span><span class="bp">None</span><span class="p">):</span>
        <span class="c1"># 覆写 get_object 方法的目的是因为需要对 post 的 body 值进行渲染</span>
        <span class="n">md</span> <span class="o">=</span> <span class="n">markdown</span><span class="o">.</span><span class="n">Markdown</span><span class="p">(</span><span class="n">extensions</span><span class="o">=</span><span class="p">[</span>
            <span class="s1">&#39;markdown.extensions.extra&#39;</span><span class="p">,</span>
            <span class="s1">&#39;markdown.extensions.codehilite&#39;</span><span class="p">,</span>
            <span class="c1"># 记得在顶部引入 TocExtension 和 slugify</span>
            <span class="n">TocExtension</span><span class="p">(</span><span class="n">slugify</span><span class="o">=</span><span class="n">slugify</span><span class="p">),</span>
        <span class="p">])</span>
        <span class="n">post</span><span class="o">.</span><span class="n">body</span> <span class="o">=</span> <span class="n">md</span><span class="o">.</span><span class="n">convert</span><span class="p">(</span><span class="n">post</span><span class="o">.</span><span class="n">body</span><span class="p">)</span>
        <span class="n">post</span><span class="o">.</span><span class="n">toc</span> <span class="o">=</span> <span class="n">md</span><span class="o">.</span><span class="n">toc</span>
        <span class="k">return</span> <span class="n">post</span>

    <span class="k">def</span> <span class="nf">get_context_data</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="o">**</span><span class="n">kwargs</span><span class="p">):</span>
        <span class="c1"># ...</span>
</pre></div>


<p>和之前不同的是，<code>extensions</code> 中的 <code>toc</code> 拓展不再是字符串 <code>markdown.extensions.toc</code> ，而是 <code>TocExtension</code> 的实例。<code>TocExtension</code> 在实例化时其 <code>slugify</code> 参数可以接受一个函数作为参数，这个函数将被用于处理标题的锚点值。Markdown 内置的处理方法不能处理中文标题，所以我们使用了 <code>django.utils.text</code> 中的 <code>slugify</code> 方法，该方法可以很好地处理中文。</p>
<p>这时候标题的锚点 URL 变得好看多了。</p>
<blockquote>
<p>http://127.0.0.1:80008.html#我是标题一</p>
<p>http://127.0.0.1:80008.html#我是标题二下的子标题</p>
</blockquote>
<h2 id="总结">总结</h2>
<p>本章节的代码位于：<a href="https://github.com/zmrenwu/django-blog-tutorial/tree/Step24_extract-content-automatically-using-markdown">Step24: extract content automatically using markdown</a>。</p>
<p>如果遇到问题，请通过下面的方式寻求帮助。</p>
<ul>
<li>简单问题在下方评论区留言。</li>
<li>在 <a href="http://www.pythonzh.cn/category/newbie-qa/">Pythonzhcn 社区的新手问答版块</a> 发布帖子。</li>
</ul>
    <p class="text-center">
      -- EOF --
    </p>
    <div>
      <button class="btn btn-primary" id="js-reward"><i class="fa fa-jpy"
                                                        aria-hidden="true"></i>
        如果觉得文章对你有帮助，请随意打赏
        <i class="fa fa-chevron-down" aria-hidden="true"></i>
      </button>
      <div class="flex-left flex-wrap units-gap-big mt-4" style="display: none">
        <div class="unit unit-1-on-mobile flex-center">
          <figure>
            <img src="/static/blog/images/weixinpay.jpg" alt="微信支付收款二维码"
                 style="width: 250px">
            <figcaption class="text-center fs-6 mt-2" style="color: green">微信</figcaption>
          </figure>
        </div>
        <div class="unit unit-1-on-mobile flex-center">
          <figure>
            <img src="/static/blog/images/alipay.jpg" alt="支付宝收款二维码" style="width: 250px">
            <figcaption class="text-center fs-6 mt-2 text-primary">支付宝</figcaption>
          </figure>
        </div>
      </div>
    </div>
    <div class="post-tags">
      <ul class="list-inline">
        
      </ul>
    </div>
  </div>
</article>
  <div class="top-gap">
    <div class="jiathis_style">
      <span class="jiathis_txt">分享到：</span>
      <a class="jiathis_button_qzone">QQ空间</a>
      <a class="jiathis_button_tsina">新浪微博</a>
      <a class="jiathis_button_tqq">腾讯微博</a>
      <a class="jiathis_button_weixin">微信</a>
      <a href="http://www.jiathis.com/share?uid=2128865"
         class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis"
         target="_blank">更多</a>
      <a class="jiathis_counter_style"></a>
    </div>
    <script type="text/javascript">
        var jiathis_config = {data_track_clickback: 'true'};
    </script>
    <script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=2128865"
            charset="utf-8"></script>
    <!-- JiaThis Button END -->
  </div>
  <br>
  <div class="top-gap clearfix">
    
      <a href="41.html">
        <i class="fa fa-angle-double-left" aria-hidden="true"></i>
        RSS 订阅
      </a>
    
    
      <a class="float-right" href="44.html">
        简单全文搜索
        <i class="fa fa-angle-double-right" aria-hidden="true"></i>
      </a>
    
  </div>
  

  <section class="comment-area top-gap-big" id="comment-area">
    <h5>19 条评论 / 8 人参与</h5>
    
      
<div class="flex-center top-gap login-panel p-7">
  <div>
    <div class="text-muted text-center login-header"><span>登录后回复</span></div>
    <div class="flex-center text-center social-icons mt-3">
                        <span class="weibo mr-3">
                            <a href="/accounts/weibo/login/">
                                <i class="fa fa-weibo" aria-hidden="true"></i>
                            </a>
                        </span>
      <span class="github">
                            <a href="/accounts/github/login/">
                                <i class="fa fa-github" aria-hidden="true"></i>
                            </a>
                        </span>
    </div>
  </div>
</div>
    
    <div class="top-gap-big comment-list">
  
    <div class="flex-left py-4" id="c2327">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars3.githubusercontent.com/u/34232453?v=4"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">JonhoyChan
          
        </span>
    
  </header>
  <div class="comment-body">
    <p>博主你好，为什么我的url是这样的，用的python3#%E6%A0%87%E9%A2%98%E4%B8%80<br></p><p>还有post.toc = md.toc这段话里的md.toc在pycharm下会变黄，但是运行却正常，感觉很奇怪</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">1 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/2327"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
        <div class="comment-descendant-list">
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c1887">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="http://tvax2.sinaimg.cn/crop.0.0.996.996.180/006mOlR7ly8fe01ouxlu3j30ro0rogqn.jpg"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">Stallionshell
          
        </span>
    
  </header>
  <div class="comment-body">
    <p>博主你好，为什么在添加目录的get_object方法中，不需要先</p><blockquote><p>post = super(PostDetailView, self).get_object(queryset=None)</p></blockquote><p>实例化post呢？我测试了一下似乎不用不添加这个语句运行时也没有报错。</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">4 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1887"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c1888">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">Stallionshell
        

  </header>
  <div class="comment-body">
    <p>要的，文章中漏掉了：<a href="https://github.com/zmrenwu/django-blog-tutorial/blob/master/blog/views.py" rel="nofollow">https://github.com/zmrenwu/django-blog-tutorial/blob/master/blog/views.py</a></p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">4 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1888"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c881">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="http://tva1.sinaimg.cn/crop.0.0.132.132.180/005TOxokjw8env6i59372j303o03oa9u.jpg"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">小鹏super30110
          
        </span>
    
  </header>
  <div class="comment-body">
    请教下，如何在点击详情也上端的评论链接时也能跳转到先面的评论表单，或者已有评论列表起始位置，谢谢！
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">8 月，1 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/881"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c885">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">小鹏super30110
        

  </header>
  <div class="comment-body">
    在你需要跳转的地方设置 #锚点，在跳转的链接中加入这个锚点即可。具体请搜索 html 文档锚点设置方法。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">8 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/885"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c814">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars7.githubusercontent.com/u/21219371?v=4"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">李江波
          
        </span>
    
  </header>
  <div class="comment-body">
    post.toc = md.toc<br />楼主，这个传过去没数据怎么回事
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">8 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/814"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c906">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">李江波
        

  </header>
  <div class="comment-body">
    审核一下代码是不是写错了？然后看看是不是文章本身没有目录？
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">8 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/906"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c811">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars3.githubusercontent.com/u/28501971?v=4"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">Xu Lichen
          
        </span>
    
  </header>
  <div class="comment-body">
    我在运行的时候发现下行出现<br />TocExtension(slugify=slugify),<br />提示：没有slugify这个参数，然后我就去看markdown源码，发现TocExtension内只configs这一个参数，且源码内有       <br />         for key, value in configs:<br />            self.setConfig(key, value)<br />想是对configs格式有要求，要key和value的值且要可迭代，<br />因此我就把代码改成TocExtension(configs=[('slugify', slugify)]),<br />之后运行正常，没有细究原因，仅供参考。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">8 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/811"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c908">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">Xu Lichen
        

  </header>
  <div class="comment-body">
    怀疑是 markdown 的版本和示例中的不同？最新版 markdown 是支持这个参数的。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">8 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/908"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c785">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="http://tvax2.sinaimg.cn/crop.0.0.1002.1002.180/93ffb25fly8fg50b8p6n7j20ru0ru0v2.jpg"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">发情的兔
          
        </span>
    
  </header>
  <div class="comment-body">
    "我们把 md.toc 的值赋给 post.md 属性"这里应该是post.toc吧？
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">8 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/785"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c796">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">发情的兔
        

  </header>
  <div class="comment-body">
    貌似是的，感谢指正。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">8 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/796"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c388">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="http://tva2.sinaimg.cn/crop.0.3.751.751.180/5fe2a26ajw8f72nxpttvsj20kv0l10ty.jpg"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">mihelloO
          
        </span>
    
  </header>
  <div class="comment-body">
    厉害！TocExtension(slugify=slugify) 这个博主哪里有相关资料。我看了源码才知道这个用法。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">9 月，4 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/388"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c389">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">mihelloO
        

  </header>
  <div class="comment-body">
    Markdown 的官方文档就有。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">9 月，4 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/389"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c390">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="http://tva2.sinaimg.cn/crop.0.3.751.751.180/5fe2a26ajw8f72nxpttvsj20kv0l10ty.jpg"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">mihelloO
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">追梦人物
        
            <span class="master">[博主]</span>
        

  </header>
  <div class="comment-body">
    学习了，现在django进阶是跟着博主混了。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">9 月，4 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/390"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c391">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">mihelloO
        

  </header>
  <div class="comment-body">
    多看文档咯，最近在忙什么项目？
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">9 月，4 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/391"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c392">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="http://tva2.sinaimg.cn/crop.0.3.751.751.180/5fe2a26ajw8f72nxpttvsj20kv0l10ty.jpg"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">mihelloO
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">追梦人物
        
            <span class="master">[博主]</span>
        

  </header>
  <div class="comment-body">
    下个阶段搞个运维平台，管理服务器。刚搞了个小工具。实时浏览日志，就是用django channels做 web 版本的tail -f。以后多叨扰博主了，多请教你。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">9 月，4 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/392"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c393">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">mihelloO
        

  </header>
  <div class="comment-body">
    一起学习了，你说的这些我都没用过，该我向你学习。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">9 月，4 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/393"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c394">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="http://tva2.sinaimg.cn/crop.0.3.751.751.180/5fe2a26ajw8f72nxpttvsj20kv0l10ty.jpg"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">mihelloO
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">追梦人物
        
            <span class="master">[博主]</span>
        

  </header>
  <div class="comment-body">
    一起学习，跟你学。我发现博客用手机无法微博登录，【访问出错】error:redirect_uri_mismatch
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">9 月，4 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/394"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c395">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">mihelloO
        

  </header>
  <div class="comment-body">
    是的，微博登录在有些浏览器下有问题，也不知道怎么回事。
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">9 月，4 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/395"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
  
</div>
  </section>
</div>
  </div>

    </div>
  </div>
</section>
<footer class="bg-white py-5 mt-5 text-small text-muted">
  <div class="flex-center">
    <div>&copy; 2017 追梦人物的博客</div>
  </div>
  
  
  
</footer>
<script>
    $('[data-menu]').menu();

    var InterValObj; //timer变量，控制时间
    var curCount = 120;//当前剩余秒数

    $('#js-send').on('click', function (event) {
        var $this = $(this);
        var $targetURL = $this.attr('data-target');
        $.post(
            $targetURL,
            {email: $('#id_email').val()},
            function (data) {
                if (data.ok) {
                    $this.attr("disabled", "true");
                    $this.text("重新发送验证码" + "(" + curCount + ")");
                    InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
                    $('.message')
                        .find('span')
                        .text(data.msg)
                } else {
                    $('.message').find('span').text(data.msg)
                }
            }
        );
        return false;
    });

    //timer处理函数
    function SetRemainTime() {
        if (curCount === 0) {
            window.clearInterval(InterValObj);//停止计时器
            $('#js-send').removeAttr("disabled");//启用按钮
            $('#js-send').text("重新发送验证码");
        }
        else {
            curCount--;
            $('#js-send').text("重新发送验证码" + "(" + curCount + ")");
        }
    }

    $('#js-submit').on('click', function (event) {
        var $this = $(this);
        var $form = $('.email-binding-form');
        var $targetURL = $form.attr('action');
        console.log($targetURL);

        $.post(
            $targetURL,
            {
                email: $('#id_email').val(),
                verification_code: $('#id_verification_code').val()
            },
            function (data) {
                if (data.ok) {
                    location.reload();
                } else {
                    $('.message')
                        .find('span')
                        .text(data.msg)
                }
            }
        );
        return false;
    });


    var editor = new Simditor({
        textarea: $('#id_comment'),
        placeholder: "提出你的见解...",
        toolbarFloat: false,
        cleanPaste: true,
        toolbar: [
            'bold',
            'italic',
            'underline',
            'strikethrough',
            'color',
            'ol',
            'ul',
            'blockquote',
            'code',
            'table',
            'link',
            'image',
            'hr'
        ]
    });
</script>


</body>
</html>